import React from 'react';
import { connect } from 'dva';
import { List, ListView, Icon, Tabs } from 'antd-mobile';
import Container from '../components/Base/Container';
import styles from './PrecisionPage.css';


const TabPane = Tabs.TabPane;
const Item = List.Item;

const data = [
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',
  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
  {
    img: <Icon type={require('../svg/user.svg')} />,
    name: '张一铭',
    tel: '13666453456',
    type: '普通会员',

  },
];
let pageIndex = 0;

class P extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.initData = Array.from(data);
    this.state = {
      dataSource: dataSource.cloneWithRows(this.initData),
      refreshing: false,
      isLoading: false,
      hasMore: true,
    };
  }
  renderRow = (rowData) => {
    return (
      <Item >
        <div className={styles.card} />
      </Item>
    );
  };
  onEndReached = (event) => {
    if (this.state.isLoading) {
      return;
    }
    if (!this.state.hasMore) { return; }
    console.log('reach end', event);
    this.setState({ isLoading: true });
    this.timer = setTimeout(() => {
      pageIndex += 1;
      this.initData = [...this.initData, ...data];
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.initData),
        isLoading: false,
      });
      if (pageIndex > 1) {
        this.setState({
          hasMore: false,
        });
      }
    }, 1000);
  };
  render() {
    return (
      <Container title="优惠券">
        <Tabs defaultActiveKey="1" swipeable={false}>
          <TabPane tab="未使用" key="1">
            <ListView
              style={{ height: document.documentElement.clientHeight - 90 }}
              renderHeader={() => '共 200 条'}
              renderRow={this.renderRow}
              dataSource={this.state.dataSource}
              renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
                {this.state.isLoading ? '加载中...' : '加载完毕'}
              </div>}
              pageSize={20}
              initialListSize={20}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={100}
            />
          </TabPane>
          <TabPane tab="已使用" key="2">
            <ListView
              style={{ height: document.documentElement.clientHeight - 90 }}
              renderHeader={() => '共 200 条'}
              renderRow={this.renderRow}
              dataSource={this.state.dataSource}
              renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
                {this.state.isLoading ? '加载中...' : '加载完毕'}
              </div>}
              pageSize={20}
              initialListSize={20}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={100}
            />
          </TabPane>
          <TabPane tab="已过期" key="3">
            <ListView
              style={{ height: document.documentElement.clientHeight - 90 }}
              renderHeader={() => '共 200 条'}
              renderRow={this.renderRow}
              dataSource={this.state.dataSource}
              renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
                {this.state.isLoading ? '加载中...' : '加载完毕'}
              </div>}
              pageSize={20}
              initialListSize={20}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={100}
            />
          </TabPane>
        </Tabs>

      </Container>
    );
  }
}
export default connect()(P);
